<template>
    <div>
       <div style="border:1px solid black;height:400px;">
        <el-container>
        <el-header>
            <span class="left">新增会员</span>
            <div style="float:right;">
            <a class="el-button" size="mini" id ='dc'>导出数据</a>
            <el-button-group class="header_right">
                <el-button size="mini" class="header_right"  autofocus="autofocus">本月数据</el-button>
            </el-button-group>
            </div>
        </el-header>
        <el-main>
            <div id="flow" style="width: 1000px;height:300px;"></div>
        </el-main>
    </el-container>
       </div>
       <div  style="border:1px solid black;height:500px;margin-top:25px;">
      <el-container>
      <el-header>
        <span class="left">端口来源</span>
        <div style="float:right;">
          <a class="el-button" size="mini" id ='dc2'>导出数据</a>
          <el-button-group class="header_right">
            <el-button size="mini" class="header_right" @click="fetchData2()">本月数据</el-button>
          </el-button-group>
            <el-date-picker
                class="header_right"
                v-model="dateRange2"
                size="mini"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchData2()"
                value-format="yyyy-MM-dd"
            ></el-date-picker>
        </div>
      </el-header>
    <el-main>
        <div id="dk" style="width: 750px;height:250px;margin-top:50px;"></div>
        </el-main>
    </el-container>
    </div>
    </div>
</template>

<script>
export default {
    dc () {
      console.log(document.getElementsByTagName("table")[0].outerHTML)
      var html1 =
        "<html><head><meta charset='utf-8' /></head><body>" +
        document.getElementsByTagName("table")[0].outerHTML +
        "</body></html>";
      var blob1 = new Blob([html1], { type: "application/vnd.ms-excel" })
      var a1 = document.getElementById("dc");
      a1.href = URL.createObjectURL(blob1);
      a1.download = "交易数据统计1.xls"
    },
    data() {
        return {
            dateList: [],
            dateList2: [],
            pvList: [],
            uvList: [],
            dateRange2: [],
            dkList: ['pc端', '微信', 'APP', '其他']
        }
    },
    methods: {
    getDate() {
        const arr = []
        for (let i = 0; i < 7; i++) {
        const time = new Date(new Date().setDate((new Date().getDate() + i) - 7));
        const year = time.getFullYear();
        const month = `0${time.getMonth() + 1}`.slice(-2);
        const strDate = `0${time.getDate()}`.slice(-2);
        arr.push(`${year}-${month}-${strDate}`)
      }
      this.dateList = arr
    },
    async fetchData2() {
      if (this.dateRange2.length === 0) {
        this.dateRange2 = this.getTmonth()
      }
      var dataList = []
      var date1 = this.dateRange2[0]
        var date2 = this.dateRange2[1]
      const { data: res2 } = await this.$http.post(
        `orders/statis/userDK?date1=${date1}&date2=${date2}`
      )
      for (var i = 0; i < this.dkList.length; i++) {
          dataList.push({ value: res2.data[i], name: this.dkList[i] })
      }
      var myChart = this.$echarts.init(document.getElementById("dk"))
      var option = {
          title: {
            text: "端口占比",
            x: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            left: "right",
            data: this.dkList
          },
          series: [
            {
              name: "金额",
              type: "pie",
              radius: "55%",
              center: ["35%", "60%"],
              data: dataList,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
      };
      myChart.setOption(option)
    },
    async fetchData() {
        const { data: res } = await this.$http.post(
          `orders/statis/userCreated`, this.dateList2
        )
        var myChart = this.$echarts.init(document.getElementById("flow"))
        var option = {
          title: {
              text: '折线图堆叠'
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data: ['浏览次数(PV)']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          toolbox: {
              feature: {
                  saveAsImage: {}
              }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.dateList2,
              axisLabel: {
              rotate: 30, // 旋转角度
              interval: 0
              }
          },
          yAxis: {
              type: 'value',
              min: 0,
              max: 100,
              interval: 20
          },
          series: [
              {
                  name: '注册人数',
                  type: 'line',
                  stack: '总数',
                  data: res.data
              }
          ]
};
      myChart.setOption(option)
        },
    getDate2() {
      var ss = this.getTmonth()
          this.dateList2.push(ss[0])
        const time = new Date(new Date().setDate((new Date().getDate())));
        const year = time.getFullYear();
        const month = `0${time.getMonth() + 1}`.slice(-2);
        // const strDate = `0${time.getDate()}`.slice(-2);
        for (var i = 5; i < 31; i += 5) {
          var x;
          if (i < 10) {
              x = "0" + i
          } else {
            x = i
          }
        var dates = `${year}-${month}-${x}`
          this.dateList2.push(dates)
        }
          this.dateList2.push(ss[1])
    },
    formatDate(date) {
      date = new Date(date);
      const myyear = date.getFullYear();
      let mymonth = date.getMonth() + 1;
      let myweekday = date.getDate();
      if (mymonth < 10) {
      mymonth = "0" + mymonth
      }
      if (myweekday < 10) {
          myweekday = "0" + myweekday
      }
      return `${myyear}-${mymonth}-${myweekday}`;
    },
    mGetDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var d = new Date(year, month, 0);
      return d.getDate();
    },
    getNowM(e) {
      const now = new Date();
      var currentMonthNum = this.mGetDate();
      var currentMonth = [];
      for (let i = 1; i <= currentMonthNum; i++) {
        var day = now.setDate(i);
        var everyDay = this.formatDate(day);
        currentMonth.push(everyDay);
      }
      this.dateList2 = currentMonth;
    },
    getTime(value) {
        var now = new Date(value);
        // var year = now.getYear();
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var days = now.getDate();
        // var dayOfWeek = now.getDay();
        // var hour = now.getHours();
        // var minutes = now.getMinutes();
        // var seconds = now.getSeconds();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (days >= 0 && days <= 9) {
            days = "0" + days;
        }
        // if (hour >= 0 && hour <= 9) {
        //     hour = "0" + hour;
        // }
        // if (minutes >= 0 && minutes <= 9) {
        //     minutes = "0" + minutes;
        // }
        // if (seconds >= 0 && seconds <= 9) {
        //     seconds = "0" + seconds;
        // }
        var time1 = year + "-" + month + "-" + days // + "  " + hour + ":" + minutes + ":" + seconds;
        return time1;
    },
    getTmonth() {
      var now = new Date()
      var nowMonth = now.getMonth()
      var nowYear = now.getFullYear()
      var monthStartDate = new Date(nowYear, nowMonth, 1);
      var monthEndDate = new Date(nowYear, nowMonth + 1, 0)
      var timeStar = this.getTime(monthStartDate)
      var timeEnd = this.getTime(monthEndDate)
      // console.log(timeStar + "==>" + timeEnd)
      var str = [timeStar, timeEnd]
      return str
    }
    },
    mounted() {
        this.getNowM()
        this.fetchData()
        this.fetchData2()
    }
}
</script>

<style scoped>
.el-header {
  background-color: rgba(228, 228, 228, 1);
  color: #333;
  text-align: center;
  line-height: 60px;
}
.left {
  float: left;
}
.header_right {
  margin-left: 15px;
}
</style>
